<template>
  <div class="role-list-page">
    <div class="filter-bar">
      <el-input v-model="filter.name" placeholder="角色名称" style="width: 180px; margin-right: 8px;" clearable/>
      <el-input v-model="filter.code" placeholder="角色编码" style="width: 180px; margin-right: 8px;" clearable/>

      <el-button type="primary" @click="handleFilter" style="margin-right: 8px;">筛选</el-button>
      <el-button @click="resetFilter" style="margin-right: 8px;">重置</el-button>
      <el-button v-if="hasAddPermission" class="ml-auto" type="primary" @click="openForm()">新增角色</el-button>
    </div>

    <el-table
        :data="filteredRoles"
        border
        style="width: 100%"
        row-key="id"
    >
      <el-table-column prop="name" label="角色名称" min-width="90"/>
      <el-table-column prop="code" label="角色编码" min-width="100"/>
      <el-table-column prop="description" label="描述信息" min-width="150">
        <template #default="{row}">
          <span class="text-ellipsis" :title="row.description">{{ row.description }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" min-width="60">
        <template #default="{row}">
          <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleFieldUpdate(row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{row}">
          <el-button v-if="hasEditPermission" size="small" @click="openForm(row)">编辑</el-button>

          <el-button v-if="hasDeletePermission" size="small" type="danger" @click="handleDelete(row)">删除</el-button>

          <el-button v-if="hasAssignPermission" size="small" type="info" @click="openForm(row, 'assignMenu')">分配菜单</el-button>

          <el-button v-if="hasAssignPermission" size="small" type="warning" @click="openForm(row, 'assignPermissions')">分配权限</el-button>

        </template>
      </el-table-column>
    </el-table>

    <RolesForm
        v-model="formVisible"
        :form-data="currentFormData"
        @submit="handleFormSubmit"
    />
    <!-- 分配菜单 -->
    <RoleMenuAssign
        v-model="menuAssignVisible"
        :role-id="selectedRoleId"
        @submit="handleMenuAssignSubmit"
    />
    <!-- 分配权限 -->
    <RolePermissionAssign
        v-model="permissionAssignVisible"
        :role-id="selectedRoleId"
        @submit="handlePermissionAssignSubmit"
    />
  </div>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue'
import {useFilterActions} from '@/services/useFilterActions'
import {useRoleFormActions, useRoleListData} from '@/services/auth/roles/rolesApiServices'
import RolesForm from '@/views/roles/RolesForm.vue'
import RoleMenuAssign from '@/views/roles/RoleMenuAssign.vue'
import RolePermissionAssign from '@/views/roles/RolePermissionAssign.vue'
import {useRolesStore} from "@/stores/rolesStore";

const rolesStore = useRolesStore()
// 权限控制（可替换为真实权限）
const hasAddPermission = true
const hasEditPermission = true
const hasDeletePermission = true
const hasAssignPermission = true // 分配权限和菜单的权限

// 筛选条件
const {filter, handleFilter, resetFilter} = useFilterActions(
    {name: '', code: ''},
    {
      onFilter: () => {
      },
      onReset: () => {
      }
    })

// 获取角色数据
const {filteredRoles} = useRoleListData(rolesStore,filter)

onMounted(async () => {
  await refreshRoles()
})
async function refreshRoles() {
  // 如果需要，可以在这里添加刷新逻辑
  // 或者直接使用 store 的方法
  if (!rolesStore.rolesList || rolesStore.rolesList.length === 0) {
    await rolesStore.fetchRoles();
  }
}

// 表单操作
// 使用 useRoleFormActions，它封装了角色管理的所有核心功能：
// - 创建、更新、删除角色
// - 分配菜单、分配权限
// 它连接了 UI 操作和后端 API，提供统一的操作接口
const {formVisible, currentFormData, openForm, handleFormSubmit, handleDelete, handleFieldUpdate} = useRoleFormActions({
  // 当角色数据发生变化时的回调函数
  // 这里我们使用 refreshRoles 来刷新列表
  onRoleChange: refreshRoles
})

// 新增用于分配菜单和权限的响应式变量
const menuAssignVisible = ref(false)
const permissionAssignVisible = ref(false)
const selectedRoleId = ref(null)

// 处理菜单分配提交
const handleMenuAssignSubmit = () => {
  menuAssignVisible.value = false
  refreshRoles()
}

// 处理权限分配提交
const handlePermissionAssignSubmit = () => {
  permissionAssignVisible.value = false
  refreshRoles()
}
</script>
<style scoped>
.ml-auto {
  margin-left: auto;
}

.role-list-page {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
}

.filter-bar {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
}
</style>